<template>
    <div>
        <van-nav-bar title="线下训练" fixed left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight">
        <van-icon size="20px" :name="fav" slot="right" />
        </van-nav-bar>
        <div class="content">
          <DetailCard :data="detail"></DetailCard>
          <div class="info">
            <p>{{detail.name}}
            <template v-if="detail.degree==1">
            <van-tag style="margin:0;" color="#fff" text-color="#000" size="large" plain>入门</van-tag>
            </template>
            <template v-if="detail.degree==2">
            <van-tag style="margin:0;" color="#ffe1e1" text-color="#07c160" size="large" plain>菜鸟</van-tag>
            </template>
            <template v-if="detail.degree==3">
            <van-tag style="margin:0;" color="#ffe1e1" text-color="#f00" size="large" plain>进阶</van-tag>
            </template></p>
            <span>介绍: </span>
            <p v-html="detail.intro"></p>
            <span>注意事项: </span>
            <p v-html="detail.notice"></p>
            <p>训练时间: {{detail.traintime}}</p>
            <p>训练地点: {{detail.place}}</p>
            <p>预算金额: ￥{{detail.price}}</p>
            <p>浏览人数: {{detail.hits}}</p>
            <p>更新时间: {{detail.update_time}}</p>
          </div>
        </div>
    </div>
</template>

<script>
import DetailCard from '@/components/DetailCard.vue'
export default {
  name: 'traindetail',
  components: {
    DetailCard
  },
  methods: {
    onClickLeft () {
      this.$root.$router.go(-1)
    },
    onClickRight () {
      if (this.fav === 'like-o') {
        // console.log('session :', sessionStorage.sessionid)
        // console.log('sessionuser :', sessionStorage.userid)
        this.$axios.get('/api/create', {
          params: {
            SessionID: sessionStorage.sessionid,
            mod: 'trainfavor',
            train_id: this.detail.id,
            user_id: sessionStorage.sessionid
          }
        }).then((result) => {
          this.fav = 'like'
          console.log('result :', result)
        }).catch((err) => {
          console.log('err :', err)
        })
      } else {
        this.$axios.get('/api/delete', {
          params: {
            SessionID: sessionStorage.sessionid,
            mod: 'trainfavor',
            train_id: this.detail.id,
            user_id: sessionStorage.sessionid
          }
        }).then((result) => {
          console.log('result :', result)
          this.fav = 'like-o'
        }).catch((err) => {
          console.log('err :', err)
        })
      }
    }
  },
  data () {
    return {
      detail: {},
      video: [],
      fav: 'like-o'
    }
  },
  mounted () {
    this.$axios.get('/api/get', {
      params: {
        mod: 'train',
        id: this.$route.query.id
      }
    }).then(response => {
      console.log('result :', response.data.degree)
      this.detail = response.data
      this.detail.degree = parseInt(this.detail.degree)
    }).catch((err) => {
      console.log('err :', err)
    })
  }
}
</script>
<style scoped>
.van-nav-bar{
    border-bottom: 1px solid #ddd;
}
.content{
    margin-top: 47px;
    padding: 1rem;
}
/* .info{

} */
.info>p,span{
  margin-left: 1rem;
}
.info>p:first-of-type{
  font-size: 1.5rem;
  font-weight: 600;
}
.info>span:first-of-type{
  font-size: 1.2rem;
}
.info>p:nth-of-type(2){
  line-height: 1.6rem;
  text-indent: 2em;
  font-size: 0.9rem;
}
.info>span:nth-of-type(2){
  font-size: 1.2rem;
}
.info>p:nth-of-type(3){
  line-height: 1.6rem;
  text-indent: 2em;
  font-size: 0.9rem;
}
</style>
